<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .updateForm {
            margin: 30px 450px;
            border-collapse: collapse;
            border-radius: 10px;
            box-shadow: 0 0 0 2px cornflowerblue;
            overflow: hidden;
        }

        .updateForm th, td {
            padding: 10px 15px;
            border: 1px solid cornflowerblue;
        }

        input[type="text"] {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #999999;
        }

        textarea {
            padding: 10px;
            height: 20px;
            width: 150px;
            background-color: #f5f5f5;
            resize: none;
            outline: none;
            border-color: transparent;
            border-radius: 10px;
            font-size: 16px;
            transition: all .5s;
        }

        textarea:focus {
            height: 60px;
            width: 150px;
            border: 2px solid cornflowerblue;
            border-radius: 10px;
        }

        input[type="date"] {
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 14px;
        }

        input[type="date"]:focus {
            outline: none;
            border-color: #999;
        }

        .buttonGroup {
            text-align: center;
            margin-top: 10px;
        }

        button {
            padding: 5px 10px;
            margin-right: 20px;
            background-color: cornflowerblue;
            border-radius: 6px;
            border: none;
            color: white;
            font-weight: bold;
            font-size: 15px;
            cursor: pointer;
        }

        button:hover {
            opacity: 50%;
        }
    </style>
</head>
<body>
<form th:action="@{/liuyan/update}" method="post">
    <table border="1" class="updateForm">
        <tr>
            <th>留言编号：</th>
            <td><input type="text" name="id" th:value="${liuyan.id}"></td>
        </tr>
        <tr>
            <th>用户编号：</th>
            <td><input type="text" name="userId" th:value="${liuyan.userId}"></td>
        </tr>
        <tr>
            <th>留言标题：</th>
            <td><input type="text" name="title" th:value="${liuyan.title}"></td>
        </tr>
        <tr>
            <th>留言内容：</th>
            <td>
                <div>
                    <textarea rows="4" cols="50" name="details" th:field="${liuyan.details}"></textarea>
                </div>
            </td>
        </tr>
        <tr>
            <th>留言时间：</th>
            <td><input type="date" name="lydate" th:value="${liuyan.lydate}"></td>
        </tr>
    </table>
    <div class="buttonGroup">
        <button type="submit">修改</button>
        <button type="reset" id="reset">重置</button>
    </div>
</form>
</body>
</html>